const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
]
/**
 * codeSplit: 将打包输出的一个文件分割成多个文件（可以达到文件的并行加载，从而加载速度更快，分割更多的文件还能完成按需加载的功能）
 *            主要分割js代码
 * 1. 根据入口文件代码分割
 * 
 */

module.exports = {
  entry: './src/js/index.js',  
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  /**
   * 1.可以将node_modules中代码单独打包一个chunk最终输出
   * 2.自动分析多入口文件中有没有公共的依赖文件，如果有会打包成一个单独的chunk，不会重复的加载同一模块
   */
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'css/main.[contenthash:10].css'
    }),
    new optimizeCssAssetsWebpackPlugin()
  ],
  mode: 'production',
}
